<template>
	<!-- 邀请朋友 -->
	<view class="content display  width-100 displayColumn">
		<u-navbar :autoBack="true" bgColor="transparent">
			<template slot="left">
				<uni-icons type="left" color="#ffffff" size="23" @click="back"></uni-icons>
			</template>
		</u-navbar>
		<view class="bg1 display  width-100 displayColumn">
			<view class="bg2 display  width-100">
				<view class="bg2_all display  M-L24">

				</view>
			</view>
			<view class="bg3 display  width-100">
				<view class="bg3_all display " style="width: 350rpx;height: 350rpx;">
					<img style="width: 400rpx;height: 350rpx;position: absolute;top: 270rpx;" :src="imgs" alt="" />
				</view>
			</view>
		</view>
		<view class="other_all display  width-100 all_item">
			<view class="other_all_699 display  displayColumn width_699">
				<view class="fn_one display  width-100 M-T24">
					<view class="fn_one_item display  all_item M-L80">
						<img class="img" src="@/static/img2/item1.png" alt="" />
					</view>
					<view class="fn_one_item1 display  all_item">
						<img class="img" src="@/static/img2/item2.png" alt="" />
					</view>
					<view class="fn_one_item2 display  all_item M-R80">
						<img class="img" src="@/static/img2/item3.png" alt="" />
					</view>
				</view>
				<!-- 线 -->
				<view class="fn_lines display M-L24 M-T26"></view>
				<!-- 文字 -->
				<view class="fn_txt display  width-100 M-T16">
					<view class="fn_txt_one display displayColumn  all_item" style="margin-left: 62rpx;">
						<span class="fontSize font_comm fn_txt1">邀请好友</span>
						<span class="fontSize font_comm fn_txt1">成为分销员</span>
					</view>
					<view class="fn_txt_one display displayColumn  all_item">
						<span class="fontSize font_comm fn_txt1">邀请好友</span>
						<span class="fontSize font_comm fn_txt1">成为分销员</span>
					</view>
					<view class="fn_txt_one display displayColumn  all_item" style="margin-right: 62rpx;">
						<span class="fontSize font_comm fn_txt1">邀请好友</span>
						<span class="fontSize font_comm fn_txt1">成为分销员</span>
					</view>
				</view>
				<!-- 二维码 -->
				<view class="two_code display  width_699 all_item displayColumn" style="margin-top: 60rpx;">

					<canvas id="qrcode" canvas-id="qrcode" style="width:322rpx;height: 322rpx;"></canvas>
					<span class="fontSize font_comm fn_ttx2" style="margin-top: 20rpx;">好友打开微信扫一扫即可邀请</span>
				</view>
				<!-- 按钮 -->
				<view class="two_button display  width-100 all_item M-T50" v-if="false">
					<button class="fontSize font_comm fn_txt3 display all_item" @click="copy">
						<img class="fn_img" src="@/static/img2/link.png" alt="" />
						<span class="M-L12">复制链接</span>
					</button>
					<button class="fontSize font_comm fn_txt4 display all_item" @click="save">
						<img class="fn_img" src="@/static/img2/imgs2.png" alt="" />
						<span class="M-L12">图文邀请卡</span>
					</button>
				</view>

			</view>
		</view>

    
	</view>
</template>

<script>
	import UQRCode from '@/utils/uqrcode.js';
	export default {
		data() {
			return {
				imgs: this.$imgUrls + '2024/11/16/55d738119c2e47b588f363a7bb40cc67.png',
				data: '',
				showValue: false,
				popupBgColor: ''
			}
		},
		onReady() {
			// this.getCode();
		},
		onLoad() {
			// 获取信息
			this.getinfo()
		},

		methods: {
			getinfo() {
				this.$modal.loading('加载中');
				this.$req.get('/xcx/userExtendWallet/getExtendUrl').then(res => {

					console.log(res);
					this.data = res.data.msg;
					this.getCode();
				})
			},
			getCode() {
				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = this.data;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 161; //默认为px
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
				this.$modal.closeLoading();
			},
			back() {
				uni.navigateBack();
			},
			save(){
				
			},
			 captureScreen() {
			      // 获取页面元素的信息
			      uni.createSelectorQuery().select('.content').boundingClientRect(rect => {
			        if (!rect) return;
			
			        const { width, height } = rect;
			        const canvasId = 'screenshotCanvas';
			
			        // 设置 canvas 的宽高
			        const ctx = uni.createCanvasContext(canvasId, this);
			        ctx.setFillStyle('#ffffff'); // 设置背景颜色
			        ctx.fillRect(0, 0, width, height);
			
			        // 将页面内容绘制到 canvas
			        // 注意：这一步可能需要根据实际页面内容进行调整
			        // 例如，如果你有图片、文本等，需要分别绘制这些元素
			        // 这里简化为直接绘制一个矩形
			
			        ctx.draw(false, () => {
			          // 在 canvas 绘制完成后，转换为临时文件路径
			          uni.canvasToTempFilePath({
			            canvasId,
			            success: (res) => {
			              console.log('截图成功', res.tempFilePath);
			              // 可以在这里将截图展示给用户或进行其他操作
			              // 例如，预览图片
			              uni.previewImage({
			                urls: [res.tempFilePath]
			              });
			            },
			            fail: (err) => {
			              console.error('截图失败', err);
			            }
			          }, this);
			        });
			      }).exec();
			    },
			// 复制链接
			copy() {
				uni.setClipboardData({
					showToast: true,
					data: this.data,
					success: function() {
						console.log('success');
					}
				});
			},
		}
	}
</script>

<style>
	page {
		width: 750rpx;
		height: 1624rpx;
		background: linear-gradient(180deg, #EE7E32 0%, #FFFFFF 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
</style>
<style scoped lang="scss">
	.content {
		min-height: 100vh;
	}

	.bg1 {
		height: 470rpx;
		background: url('@/static/img2/bg1.png') no-repeat;
		background-size: 100%;
	}

	.bg2 {
		margin-top: 150rpx;

		.bg2_all {
			width: 500rpx;
			height: 70rpx;
			background: url('@/static/img2/invitefriend.png') no-repeat;
			background-size: 100%;
		}
	}

	.other_all {
		min-height: 1150rpx;
		margin-top: -10rpx;
	}

	.other_all_699 {
		width: 690rpx;
		// height: 1166rpx;
		min-height: 1150rpx;
		// height: 100%;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		z-index: 1000;
	}

	.fn_one {
		justify-content: space-between;

		.fn_one_item {
			width: 104rpx;
			height: 104rpx;
			background: #FAF3E4;
			border-radius: 50%;
		}

		.fn_one_item1 {
			width: 104rpx;
			height: 104rpx;
			background: #EEF1FB;
			border-radius: 50%;
		}

		.fn_one_item2 {
			width: 104rpx;
			height: 104rpx;
			background: #FCEBEB;
			border-radius: 50%;
		}
	}

	.img {
		width: 40rpx;
		height: 40rpx;
	}

	.fn_lines {
		width: 642rpx;
		height: 12rpx;
		background: #F2F2F3;
		border-radius: 94rpx 94rpx 94rpx 94rpx;
	}

	.fn_txt1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_txt {
		justify-content: space-between;
	}

	.fn_txt_one {
		justify-content: space-between;
	}

	.fn_img {
		width: 32rpx;
		height: 32rpx;
	}

	.fn_ttx2 {
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_txt3 {
		width: 260rpx;
		height: 72rpx;
		background: #EE7E32;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.fn_txt4 {
		width: 260rpx;
		height: 72rpx;
		background: #126BC9;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>